<template>
  <div
    id="homePage"
    class="relative min-h-screen overflow-hidden bg-white p-[0px_24px]"
  >
    <!-- 背景 start -->
    <div
      class="absolute top-0 left-0 h-[560px] w-full bg-[url('')] bg-contain bg-repeat"
    ></div>
    <!-- 背景 end -->

    <!-- banner start -->
    <div
      class="relative z-[1] mx-auto h-[330px] w-full max-w-[1510px] bg-[url('@/assets/images/indexBanner.png')] bg-[1510px_auto] bg-no-repeat"
    ></div>

    <!-- 对话框 start -->
    <div
      class="relative z-[3] mx-auto mt-[-65px] w-full max-w-[809px] rounded-[12px] shadow-[0_4px_40px_#8087af40]"
    >
      <textarea
        placeholder="一句话做网站、小程序、H5、提效工具、小游戏，你可以通过@来调用插件，为应用拓展多种能力～"
        name="content"
        class="color-[#333] !leading- relative z-[2] block h-[163px] w-full !resize-none rounded-[12px] border border-gray-200 bg-white p-[18px_90px_18px_20px] font-[14px] transition-all duration-300 outline-none focus:border-[#4f65f9] focus:shadow-[0_0px_0px_4px_#4f65f940]"
      ></textarea>
      <div class="absolute right-[12px] bottom-[12px] z-[2] m-[-5px] flex">
        <a-button
          :icon="h(AudioOutlined)"
          class="!m-[5px] !flex !h-[34px] !w-[34px] items-center justify-center !rounded-[10px] !text-[14px]"
        >
          <template #icon>
            <SendOutlined />
          </template>
        </a-button>
        <a-button
          type="primary"
          :icon="h(SendOutlined)"
          :loading="true"
          class="!m-[5px] !flex !h-[34px] !w-[34px] items-center justify-center !rounded-[10px] !text-[14px]"
        >
          <template #icon>
            <SendOutlined />
          </template>
        </a-button>
      </div>
      <img
        src="@/assets/images/homeIcon.png"
        alt="吉祥物"
        class="absolute top-[-120px] right-[20px] h-[160px] w-[160px]"
      />
    </div>
    <!-- 对话框 end -->

    <!-- 快捷入口 start -->
    <div class="m-[19px_-7px_70px] flex items-center justify-center">
      <a-button
        shape="round"
        class="!m-[7px]"
        v-for="item in buttonList"
        :key="item.label"
        @click="buttonClickHandle(item)"
        >{{ item.label }}</a-button
      >
    </div>
    <!-- 快捷入口 end -->

    <!-- 我的作品 start -->
    <div class="relative z-[3] mx-auto w-full max-w-[1674px]">
      <h2 class="color-gray-333 !mb-[20px] text-[20px] font-[600]">我的作品</h2>
      <div class="m-[-16px_-12px_33px] flex flex-wrap">
        <div class="w-[25%]">
          <div class="p-[16px_12px]">
            <div class="group relative mb-[14px] overflow-hidden rounded-[12px]">
              <img
                src="@/assets/images/homeCard1.png"
                alt=""
                class="h-auto w-full transition-all duration-300 hover:scale-105"
              />
              <div
                class="absolute bottom-[0px] left-[0px] flex w-full translate-y-full gap-[10px] p-[10px] opacity-0 duration-300 group-hover:translate-y-0 group-hover:opacity-100"
              >
                <a-button
                  block
                  type="primary"
                  >访问</a-button
                >
                <a-button block>详情</a-button>
              </div>
            </div>
            <div>
              <div class="color-gray-333 mb-[8px] text-[16px] font-[500]">2025秒哒校园大使招募</div>
              <div class="flex items-center">
                <img
                  src="@/assets/images/homeCard1.png"
                  alt=""
                  class="mr-[6px] block h-[20px] w-[20px] rounded-full object-cover"
                /><span class="color-gray-666 flex-1 text-[12px]">星绘官方</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-[25%]">
          <div class="p-[16px_12px]">
            <div class="group relative mb-[14px] overflow-hidden rounded-[12px]">
              <img
                src="@/assets/images/homeCard1.png"
                alt=""
                class="h-auto w-full transition-all duration-300 hover:scale-105"
              />
              <div
                class="absolute bottom-[0px] left-[0px] flex w-full translate-y-full gap-[10px] p-[10px] opacity-0 duration-300 group-hover:translate-y-0 group-hover:opacity-100"
              >
                <a-button
                  block
                  type="primary"
                  >访问</a-button
                >
                <a-button block>详情</a-button>
              </div>
            </div>
            <div>
              <div class="color-gray-333 mb-[8px] text-[16px] font-[500]">2025秒哒校园大使招募</div>
              <div class="flex items-center">
                <img
                  src="@/assets/images/homeCard1.png"
                  alt=""
                  class="mr-[6px] block h-[20px] w-[20px] rounded-full object-cover"
                /><span class="color-gray-666 flex-1 text-[12px]">星绘官方</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-[25%]">
          <div class="p-[16px_12px]">
            <div class="group relative mb-[14px] overflow-hidden rounded-[12px]">
              <img
                src="@/assets/images/homeCard1.png"
                alt=""
                class="h-auto w-full transition-all duration-300 hover:scale-105"
              />
              <div
                class="absolute bottom-[0px] left-[0px] flex w-full translate-y-full gap-[10px] p-[10px] opacity-0 duration-300 group-hover:translate-y-0 group-hover:opacity-100"
              >
                <a-button
                  block
                  type="primary"
                  >访问</a-button
                >
                <a-button block>详情</a-button>
              </div>
            </div>
            <div>
              <div class="color-gray-333 mb-[8px] text-[16px] font-[500]">2025秒哒校园大使招募</div>
              <div class="flex items-center">
                <img
                  src="@/assets/images/homeCard1.png"
                  alt=""
                  class="mr-[6px] block h-[20px] w-[20px] rounded-full object-cover"
                /><span class="color-gray-666 flex-1 text-[12px]">星绘官方</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-[25%]">
          <div class="p-[16px_12px]">
            <div class="group relative mb-[14px] overflow-hidden rounded-[12px]">
              <img
                src="@/assets/images/homeCard1.png"
                alt=""
                class="h-auto w-full transition-all duration-300 hover:scale-105"
              />
              <div
                class="absolute bottom-[0px] left-[0px] flex w-full translate-y-full gap-[10px] p-[10px] opacity-0 duration-300 group-hover:translate-y-0 group-hover:opacity-100"
              >
                <a-button
                  block
                  type="primary"
                  >访问</a-button
                >
                <a-button block>详情</a-button>
              </div>
            </div>
            <div>
              <div class="color-gray-333 mb-[8px] text-[16px] font-[500]">2025秒哒校园大使招募</div>
              <div class="flex items-center">
                <img
                  src="@/assets/images/homeCard1.png"
                  alt=""
                  class="mr-[6px] block h-[20px] w-[20px] rounded-full object-cover"
                /><span class="color-gray-666 flex-1 text-[12px]">星绘官方</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-[25%]">
          <div class="p-[16px_12px]">
            <div class="group relative mb-[14px] overflow-hidden rounded-[12px]">
              <img
                src="@/assets/images/homeCard1.png"
                alt=""
                class="h-auto w-full transition-all duration-300 hover:scale-105"
              />
              <div
                class="absolute bottom-[0px] left-[0px] flex w-full translate-y-full gap-[10px] p-[10px] opacity-0 duration-300 group-hover:translate-y-0 group-hover:opacity-100"
              >
                <a-button
                  block
                  type="primary"
                  >访问</a-button
                >
                <a-button block>详情</a-button>
              </div>
            </div>
            <div>
              <div class="color-gray-333 mb-[8px] text-[16px] font-[500]">2025秒哒校园大使招募</div>
              <div class="flex items-center">
                <img
                  src="@/assets/images/homeCard1.png"
                  alt=""
                  class="mr-[6px] block h-[20px] w-[20px] rounded-full object-cover"
                /><span class="color-gray-666 flex-1 text-[12px]">星绘官方</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-[25%]">
          <div class="p-[16px_12px]">
            <div class="group relative mb-[14px] overflow-hidden rounded-[12px]">
              <img
                src="@/assets/images/homeCard1.png"
                alt=""
                class="h-auto w-full transition-all duration-300 hover:scale-105"
              />
              <div
                class="absolute bottom-[0px] left-[0px] flex w-full translate-y-full gap-[10px] p-[10px] opacity-0 duration-300 group-hover:translate-y-0 group-hover:opacity-100"
              >
                <a-button
                  block
                  type="primary"
                  >访问</a-button
                >
                <a-button block>详情</a-button>
              </div>
            </div>
            <div>
              <div class="color-gray-333 mb-[8px] text-[16px] font-[500]">2025秒哒校园大使招募</div>
              <div class="flex items-center">
                <img
                  src="@/assets/images/homeCard1.png"
                  alt=""
                  class="mr-[6px] block h-[20px] w-[20px] rounded-full object-cover"
                /><span class="color-gray-666 flex-1 text-[12px]">星绘官方</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-[25%]">
          <div class="p-[16px_12px]">
            <div class="group relative mb-[14px] overflow-hidden rounded-[12px]">
              <img
                src="@/assets/images/homeCard1.png"
                alt=""
                class="h-auto w-full transition-all duration-300 hover:scale-105"
              />
              <div
                class="absolute bottom-[0px] left-[0px] flex w-full translate-y-full gap-[10px] p-[10px] opacity-0 duration-300 group-hover:translate-y-0 group-hover:opacity-100"
              >
                <a-button
                  block
                  type="primary"
                  >访问</a-button
                >
                <a-button block>详情</a-button>
              </div>
            </div>
            <div>
              <div class="color-gray-333 mb-[8px] text-[16px] font-[500]">2025秒哒校园大使招募</div>
              <div class="flex items-center">
                <img
                  src="@/assets/images/homeCard1.png"
                  alt=""
                  class="mr-[6px] block h-[20px] w-[20px] rounded-full object-cover"
                /><span class="color-gray-666 flex-1 text-[12px]">星绘官方</span>
              </div>
            </div>
          </div>
        </div>

        <div class="w-[25%]">
          <div class="p-[16px_12px]">
            <div class="group relative mb-[14px] overflow-hidden rounded-[12px]">
              <img
                src="@/assets/images/homeCard1.png"
                alt=""
                class="h-auto w-full transition-all duration-300 hover:scale-105"
              />
              <div
                class="absolute bottom-[0px] left-[0px] flex w-full translate-y-full gap-[10px] p-[10px] opacity-0 duration-300 group-hover:translate-y-0 group-hover:opacity-100"
              >
                <a-button
                  block
                  type="primary"
                  >访问</a-button
                >
                <a-button block>详情</a-button>
              </div>
            </div>
            <div>
              <div class="color-gray-333 mb-[8px] text-[16px] font-[500]">2025秒哒校园大使招募</div>
              <div class="flex items-center">
                <img
                  src="@/assets/images/homeCard1.png"
                  alt=""
                  class="mr-[6px] block h-[20px] w-[20px] rounded-full object-cover"
                /><span class="color-gray-666 flex-1 text-[12px]">星绘官方</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="mb-[30px] flex content-center justify-center">
        <a-pagination
          v-model:current="current"
          v-model:page-size="pageSizeRef"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          @showSizeChange="onShowSizeChange"
        >
          <template #buildOptionText="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-else>全部</span>
          </template>
        </a-pagination>
      </div>
    </div>
    <!-- 我的作品 end -->
  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue';
import { AudioOutlined, SendOutlined } from '@ant-design/icons-vue';

// 按钮列表
const buttonList = reactive([
  {
    label: '个人博客网站',
    value:
      '创建一个现代化的个人博客网站，包含文章列表、详情页、分类标签、搜索功能、评论系统和个人简介页面。采用简洁的设计风格，支持响应式布局，文章支持Markdown格式，首页展示最新文章和热门推荐。'
  },
  {
    label: '企业官网',
    value:
      '设计一个专业的企业官网，包含公司介绍、产品服务展示、新闻资讯、联系我们等页面。采用商务风格的设计，包含轮播图、产品展示卡片、团队介绍、客户案例展示，支持多语言切换和在线客服功能。'
  },
  {
    label: '在线商城',
    value:
      '构建一个功能完整的在线商城，包含商品展示、购物车、用户注册登录、订单管理、支付结算等功能。设计现代化的商品卡片布局，支持商品搜索筛选、用户评价、优惠券系统和会员积分功能。'
  },
  {
    label: '作品展示网站',
    value:
      '制作一个精美的作品展示网站，适合设计师、摄影师、艺术家等创作者。包含作品画廊、项目详情页、个人简历、联系方式等模块。采用瀑布流或网格布局展示作品，支持图片放大预览和作品分类筛选。'
  }
]);

// 按钮点击事件
const buttonClickHandle = (item: { label: string; value: string }) => {
  console.log(item.value);
};

const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
const current = ref(1);
const pageSizeRef = ref(10);
const total = ref(50);
const onShowSizeChange = (current: number, pageSize: number) => {
  console.log(current, pageSize);
  pageSizeRef.value = pageSize;
};
</script>

<style lang="scss" scoped></style>
